<template>

          <mt-loadmore
           :cancelable ="false"
            :bottom-method="loadBottom"
            :auto-fill="false"
            :bottom-all-loaded="allLoaded"
            ref="loadmore"
          >
        
    <div class="listViewport">
        <div class="li" v-for="(item,index) in listData" @click="gotoDetail(item)" :key="index">
           <div class="title">
               {{item.题名}}
           </div> 
           <div class="author">
                <span class="author1">
                    <span class="name">作者：</span>
                    <span class="name">{{item.作者}}</span>
                </span>
                <span class="label"> 
                    <span class="name">标签：</span>
                    <span class="name">{{item.来源数据库}}</span>
                </span>
           </div>
           <div class="content">
                    <span  class="name">内容：</span>
                <span class="name" >{{item.关键词}}</span>
           </div>
           <div class="info">
                <div class="nma">
                    <span>下载量：</span>
                    <span>{{item.下载频次}}</span>
                </div>
                <div class="nma">
                    <span>浏览量：</span>
                    <span>{{item.浏览频次}}</span>
                </div>
                <div class="time">
                    <span>发表时间：</span>
                     <span>{{item.发表时间.split(" ")[0]}}</span> 
                </div>
           </div>
        </div>
            
    </div>
    
          </mt-loadmore>
</template>
<script> 
import { singleSearch } from "../../api/home.js";
export default {
    props:["listData","tabItem","clickIndex"
    ],
    data() {
        return {
            allLoaded:false,
        }
    },
 
    methods:{
        loadBottom() { 
            this.tabItem.pageNow = Number(this.tabItem.pageNow)+1;    
            //激活菜单修改样式调整   
            document.querySelectorAll(".listViewport")[this.clickIndex].classList.add("padding50");
               singleSearch({
                    pagenow:this.tabItem.pageNow,
                    pagesize:5,
                    type:2,
                    dbcode:this.tabItem.DatabaseCode,
                    wherestr:"",
                    orderstr:"",
                    username:JSON.parse(
                    window.localStorage.userInfo
                    ).UserName,
                    }).then((res) => { 
                    let ary =this.listData.concat(...JSON.parse(res.data.data));
                    this.$set(this,'listData',ary);
                }); 


        },  
        gotoDetail(item) {   
            let data = JSON.stringify({
                dbcode: item.TABLENAME,
                sysid: item.SYS_FLD_SYSID,
                fileName:item.文件名,
                dbname:item.来源数据库,
                vsm:item.SYS_VSM,
            });
                let type = 2;
                let url = 
                window.localStorage.mirrorUrl+item.TABLENAME +
                "&filename=" +
                item.文件名;
            this.$router.push({
                path: "/cnkiDetail",
                query: {
                    type,
                    data,
                    url,
                    tableName:item.表名,
                    name: item.题名,
                },
            });
        },
    }
}
</script>
<style lang="scss" scoped>
*{
    touch-action: pan-y;
}
.listViewport {
    width:100%; 
    margin:0;
    padding:0 10px;
    box-sizing:border-box;
    background:#fff; 
    // height:calc(100vh - 157px);
    .li {
        vertical-align:top;
        width:100%;
        // height:50px;
        border-bottom:1px solid #bbb;
        padding:10px 0;
        box-sizing: border-box; 
        .title {
            width:100%;
            overflow:hidden;
            white-space:nowrap;
            font-size:14px;
            text-overflow: ellipsis;
        }    
        .author {
            font-size:12px;
            color:#bbb;
            margin-top:10px;
            width:100%;
            overflow:hidden;
            white-space:nowrap;
            text-overflow: ellipsis;
            .name {
                margin-right:5px;
            }
            .name:last-child {
                margin-right:0;
            }
            .author1 {
                display:inline-block;
                vertical-align:middle;
                width:60%;
                overflow:hidden;
                white-space:nowrap;
                text-overflow: ellipsis;
            }
            .label { 
                float:right;
                display:inline-block;
                vertical-align:middle;
                width:29%;
                overflow:hidden;
                white-space:nowrap;
                text-overflow: ellipsis;
                text-align:left;

            }
        }
        .content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
             margin-top:15px;
             font-size:12px;
             color:#bbb;
        }
        .info {
            margin-top:15px;
            font-size:12px;
            color:#bbb;
            display:flex;
            .nma {
                flex:1;
                text-align:left;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .time {
                width:140px;
                text-align:right;
            }
        }

    }
}
.mint-loadmore {
    height: 100%; 
    position: relative;
}   
.padding50 {
    padding-top:50px;
}
</style>